<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!--我们一般先写HTML元素,再写CSS样式-->
        <style>
            /*指定页面背景为一张图片*/
            body{
                background-image: url("img/snow.jpg");
            }
            /*控制表单*/
            .form{
                width:550px;
                height: 300px;
                border: 1px solid black;
                background-color: white;
                margin:100px auto;/*让表单距离浏览器上边界100px,左右自动调整(居中)*/
            }
            /*控制用户注册文本*/
            .text{
                font-size:30px;/*控制字体大小*/
                text-align:center;/*文本对齐方式*/
                margin-bottom: 30px;/*控制用户注册下边框与其它边框距离*/
            }
        </style>
        <script>
            window.onload = function () {
                // 这部分代码将在用户提交表单后执行
                $('.form').on('submit', function(e) {
                    e.preventDefault(); // 阻止表单的默认提交行为

                    // 使用AJAX发送登录请求
                    $.ajax({
                        url: '/Day08_autoLogin_war_exploded/user/login', // 服务器端登录接口的URL
                        type: 'POST',
                        data: $(this).serialize(), // 将表单数据序列化
                        success: function(response) {
                            // 这里的response是服务器返回的数据
                            if (response.code == 200) {
                                $('.modal-body').text(response.msg);
                                $('#success').modal('show'); // 弹出模态框
                                setTimeout(function() {
                                    window.location.href = '/Day08_autoLogin_war_exploded/index.html'; // 2秒后跳转到首页
                                }, 2000);
                            } else if (response.code == 201) {
                                // 显示错误信息
                                $('#password').addClass('is-invalid');
                                $('.invalid-feedback').text(response.msg);
                            }
                        }
                    });
                });
            };
        </script>
    </head>
    <body>
        <!--通过action指定表单的提交服务器地址-->
        <form class="form" action="/login" method="post">
            <div class="text">用户登录</div>
            <div class="form-group row">
                <label for="uname" class="col-sm-2 offset-sm-2 col-form-label">用户名</label>
                <div class="col-sm-6">
                    <input name="username" type="text" class="form-control" id="uname" placeholder="请输入用户名" required>
                </div>
            </div>

            <div class="form-group row">
                <label for="password" class="col-sm-2 offset-sm-2 col-form-label">密码</label>
                <div class="col-sm-6">
                    <input name="password" type="password" class="form-control" id="password" placeholder="请输入密码" required>
                    <div class="invalid-feedback">
                        <!-- 这里将显示错误信息 -->
                    </div>
                </div>
            </div>

            <!--添加一个记住我的复选框-->
            <div class="form-group row">
                <div class="col-auto my-1 offset-2">
                    <div class="custom-control custom-checkbox mr-sm-2">
                        <input name="autoLogin" type="checkbox" class="custom-control-input" id="customControlAutosizing">
                        <label class="custom-control-label" for="customControlAutosizing">记住我</label>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 offset-sm-4">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
        </form>

        <!--弹出框-->
        <div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <!-- 这里将显示成功信息 -->
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>